<template>
  <div class="">
    <el-tooltip :append-to-body="true" :popper-class="'customToolTip_' + timestamp" :disabled="isShowTooltip" effect="light" ref="mypop" placement="bottom" :open-delay	="2">
      <div slot="content">
        <div class="el-tooltip-class">{{ value }}</div>
      </div>
      <div class="lianghangxianshibuquan" @mouseover="event => onMouseOver(value, event)">
        <span :ref="value">
          {{ value }}
        </span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import store from '@/store'
import { mapGetters } from 'vuex'
export default {
  name: 'CustomToolTip',
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      timestamp: new Date().getTime(),
      // 是否显示tooltip
      isShowTooltip: true,
      scalestyle: store.state.visual.scaleStyle,
      cwidth: 911,
      cheight: 611,
      // 延迟获取dom元素
      timeout: 100,
      scaleNum: 1
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'scaleStyle'
  //   ])
  // },
  // watch: {
  //   scaleStyle(newval) {
  //     this.getMeettingInfo()
  //   }
  // },
  created() {
    // this.initScale()
  },
  methods: {
    onMouseOver(str, event) {
      // console.log(event)
      // document.getElementById().style = `transform: ` + this.scalestyle + `;-moz-transform: ` + this.scalestyle + `;-webkit-transform:  ` + this.scalestyle + `;-o-transform: ` + this.scalestyle + `;`
      const parentWidth = this.$refs[str].parentNode.offsetHeight
      const contentWidth = this.$refs[str].offsetHeight
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
      if (!this.isShowTooltip) {
        this.$nextTick(() => {
          setTimeout(() => {
            var temp = document.getElementsByClassName('customToolTip_' + this.timestamp)
            temp.forEach(item => {
              item.style.transform = this.scalestyle
              item.style['-moz-transform'] = this.scalestyle
              item.style['-webkit-transform'] = this.scalestyle
              item.style['-o-transform'] = this.scalestyle
            })
          }, this.timeout)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.lianghangxianshibuquan {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.el-tooltip-class {
  font-size: 16px;
  color: #666;
  text-align: left;
}
</style>
